<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      title="产线删除"
      :width="modalWidth"
      :destroyOnClose="true"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleCancel">
            取消
          </a-button>
          <a-button v-if="del" @click="handleDel" type="primary">
            删除
          </a-button>
          <a-button v-if="!del" @click="handleOk" type="primary">确认</a-button>
        </div>
      </template>

      <a-row :gutter="24">
        <a-col :span="treeSpan">
          <div class="treeBox">
            <a-tree
              v-if="treeData.length > 0"
              :show-line="true"
              defaultExpandAll
              :tree-data="treeData"
              :selected-keys="selectedKeys"
              @select="onSelect"
              :replaceFields="replaceFields"
            >
            </a-tree>
          </div>
        </a-col>
        <a-col :span="tableSpan">
          <a-table
            :columns="columns"
            :data-source="tableData"
            :loading="loading"
            :pagination="pagination"
            @change="handleTableChange"
            bordered
            :rowKey="(record, index) => record.id"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              type: mode,
              onChange: onSelectChange,
            }"
          >
          </a-table>

        </a-col>
      </a-row>
      <component
        v-if="dynamicComponent"
        ref="modalForm"
        :treeData="treeData"
        @ok="modalFormOk"
        @getTree="getTree"
        :is="dynamicComponent"
      ></component>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/apiServer";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

export default {
  mixins: [tableMinxins],
  props: {
    // 表头配置项
    columns: {
      type: Array,
      default: [],
    },
    // 类型树配置项
    replaceFields: {
      type: Object,
      default: {},
    },
    // 类型树 接口
    treeKey: {
      type: String,
      default: "",
    },
    // 表格 接口
    tableKey: {
      type: String,
      default: "",
    },
    // 删除接口
    deletekey: {
      type: String,
      default: "",
    },
    // 树联动表格查询字段
    searchKey: {
      type: String,
      default: "",
    },
    // 模糊搜索名称字段
    name: {
      type: String,
      default: "",
    },
    // 模糊搜索编号字段
    code: {
      type: String,
      default: "",
    },
    // 单选多选模式,不传时为单选
    mode: {
      type: String,
      default: "radio",
    },
    filename: {
      type: String,
      default: "",
    },
    del: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      title: "",
      visible: false,
      isDelType: false,
      confirmLoading: false,
      treeSpan: 0,
      tableSpan: 24,
      model: {},
      treeData: [],
      tableOption: [], // 所有数据
      modalWidth: 1440,
      value: 0,
      deleteType: 0,
    };
  },
  computed: {
    dynamicComponent() {
      // 这里通过路由参数判断引入文件
      let filename = this.filename;
      if (filename !== "") {
        return () => import("@/components/" + filename + ".vue");
      } else {
        return false;
      }
    },
  },
  mounted() {},
  methods: {
    async getTree() {
      const res = await api[this.treeKey]();
      this.treeData = res.data;
    },
    async getList(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      this.loading = true;
      if (arg === 1) {
        this.pagination.current = 1;
      }
      this.queryParam.deleteFlag = "N";
      var params = this.getQueryParams();
      const res = await api[this.tableKey](params);
      this.tableData = res.data.data;
      this.pagination.total = res.data.total;
      this.loading = false;
    },
    modalFormOk() {
      this.queryParam = {};
      // 新增/修改 成功时，重载列表
      this.getList();
      this.getOption();
      //清空列表选中
      this.onClearSelected();
    },
    // 获取全部数据
    async getOption() {
      let params = { pageNumber: 1, pageSize: 10, deleteFlag: "N" };
      if (this.tableKey === "WorksheetList") {
        let id = Number(this.selectedKeys.toString());
        if (id !== 0) {
          params.id = id;
        }
      } else {
        params.pageSize = 99999999;
      }
      const res = await api[this.tableKey](params);
      this.tableOption = res.data.data;
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
      this.pagination.current = 1;
      this.pagination.pageNumber = 1;
      this.queryParam[this.searchKey] = selectedKeys[0];
      this.getList();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    modalAdd() {
      this.modalEdit({});
    },
    // 编辑
    modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.model = Object.assign({}, record);
      if (this.treeKey !== "") {
        this.treeSpan = 6;
        this.tableSpan = 18;
        this.getTree();
      } else {
        this.treeSpan = 0;
        this.tableSpan = 24;
      }
      if (this.tableKey !== "") {
        this.getList();
        this.getOption();
      }
    },
    handleOk(e) {
      const that = this;
      that.confirmLoading = true;
      that.handleSubmit();
    },
    handleSubmit() {
      let result = [];
      this.tableOption.forEach((item) => {
        this.selectedRowKeys.includes(item.id) && result.push(item);
      });
      this.$emit("tableSelect", result, this.tableOption);
      this.visible = false;
      this.confirmLoading = false;
      this.selectedKeys = [];
      this.selectedRowKeys = [];
    },
    handleCancel(e) {
      this.visible = false;
      this.model = {};
      this.tableData = [];
      this.queryParam = {};
      this.selectedKeys = [];
      this.$emit("ok");
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.modalWidth = screenWidth;
      } else {
        this.modalWidth = 1440;
      }
    },
    //删除
    handleDel() {
      this.handleDeleOk();
      this.visible = false;
    },
    handleDelCancel() {
      this.isDelType = false;
    },
    //删除类型选择
    async handleDeleOk() {
      let id = this.selectedRowKeys[0];
      const res = await api.DeleteProductLine({ id });
      this.$message.success(res.message);
      this.isDelType = false;
      this.$emit("ok")
    },
  },
};
</script>
